/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-07 14:36:09
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-10-08 14:21:59
 */
import React, { useState, useEffect } from "react";
import Blockchain from "./components/Blockchain";
import NetworkOverview from "./components/NetworkOverview";
import BlockList from "./components/BlockList";
import ExtrinsicList from "./components/ExtrinsicList";
import StoragePower from "./components/StoragePower";
import Footer from "@/components/Footer";
import DCard from "@/components/DCard";
import common from "@/utils/common";
import SearchBar from "@/components/SearchBar";
import "./index.less";

const Home = ({ ...props }) => {
	document.title = "CESS Scan";
	useEffect(() => {
		common.showAPIUrl();
	}, []);
	return (
		<div className="containner-in">
			<SearchBar height="168px" hasBackground={true} />
			<div className="content" style={{marginTop:"20px"}}>
				<NetworkOverview />
				<div className="v-box">
					<DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/storage-power.png"} />} title="Storage Capacity">
						<StoragePower className="block-box" />
					</DCard>
					<DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/block-chain.png"} />} title="Blockchain" extra="Transfers">
						<Blockchain className="block-box" />
					</DCard>
				</div>
				<div className="v-box">
					<DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/block.png"} />} title="Latest Blocks">
						<BlockList className="block-box" />
					</DCard>
					<DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/extrinsic.png"} />} title="Latest Transfers">
						<ExtrinsicList className="block-box" />
					</DCard>
				</div>
			</div>
			<Footer />
		</div>
	);
};

function isEqual(prevProps, nextProps) {
	return _.isEqual(prevProps.data, nextProps.data);
}

export default React.memo(Home, isEqual);
